<template>
    <el-dialog :visible.sync="visible" append-to-body fullscreen top="calc(4rem + 4px)" custom-class="rnm" width="100%">
        <div>
            <el-row>
                <el-col :span="is_full ? 24 : 18">
                    <div class="video-window">
                        <div @click.stop="closeFun" class="video-window-close pd-8 color-fff cursor-pointer">
                            <i class="el-icon el-icon-close weight-bold" style="color:#606060;font-size:2vw"></i>
                        </div>
                    </div>
                    <videoPlayer :index="choose_index" @next="next" @prev="prev" @setLike="setLike" @is_fullFun="is_fullFun"
                        @setMedia="setMedia" ref="pop"></videoPlayer>
                </el-col>
                <el-col :span="is_full ? 0 : 6">
                    <!-- 评论区 -->
                    <div class="comment-window bg-sidebar" style="padding-top:1vh;position: relative;z-index: 100000;">
                        <el-tabs v-model="active">
                            <el-tab-pane :label="'留言 ' + comment_count" name="comment">
                                <div class="pd-30 pt-20 pb-0" style="height:calc(100vh - (145px + 1vh))">
                                    <comment :creation="creation" ref="comment"></comment>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane :label="'作品 ' + total" name="creation">
                                <div class="scroll-window" v-infinite-scroll="getMore">
                                    <div class="position-relative" id="user-short">
                                        <template v-if="inited">
                                            <el-row :gutter="10">
                                                <el-col :key="index" :span="12" v-for="(item, index) in data">
                                                    <div :class="{ 'mt-8': index >= 2 }"
                                                        @click.stop="changeVideo(item, index)" class="position-relative">
                                                        <el-image :src="item.first_frame" fit="cover"
                                                            style="width: 100%; height: 200px;border-radius: 10px"></el-image>
                                                        <div class="video-data flex align-center">
                                                            <div class="font-12 flex align-center">
                                                                <el-image :src="require('@/assets/icon/video/viewed.png')"
                                                                    fit="cover" style="width: 18px;height:18px;"></el-image>
                                                                <span class="pl-5" style="color:#EFEFEF">{{ item.viewed
                                                                }}</span>
                                                            </div>
                                                            <div class="font-12 flex align-center ml-10">
                                                                <el-image :src="require('@/assets/icon/video/liked.png')"
                                                                    fit="cover" style="width: 16px;height:16px;"
                                                                    v-if="item.liked_count"></el-image>
                                                                <el-image
                                                                    :src="require('@/assets/icon/video/like-grey-light.png')"
                                                                    fit="cover" style="width: 16px;height:16px;"
                                                                    v-else></el-image>
                                                                <span class="pl-5" style="color:#EFEFEF">{{ item.like_count
                                                                }}</span>
                                                            </div>
                                                        </div>
                                                        <div v-if="choose_index == index"
                                                            style="position: absolute;top: 0; z-index: 9999;height: 200px;width:100%;background-color: rgba(0, 0, 0, 0.5);border-radius: 10px">
                                                            <el-image :src="require('@/assets/gif/live_big.gif')"
                                                                fit="cover"
                                                                style="width: 40px; height: 40px;margin-left: 42%;margin-top: 80px;"></el-image>
                                                        </div>
                                                    </div>

                                                </el-col>
                                            </el-row>
                                            <div class="text-center color-fff font-15 width-100% height-50">
                                                <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover"
                                                    style="width: 40px;height:30px;" v-show="append_loading"></el-image>
                                            </div>
                                        </template>
                                        <div v-else>
                                            <div class="flex jus-center align-center flex-dre-column"
                                                style="padding-top:20vh">
                                                <el-image :src="init_loading" fit="cover"
                                                    style="width: 6vw; height: 3vw"></el-image>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- comment_count -->
        <!-- 这里完整走一遍短视频详情播放页的流程 -->
        <!-- <short-pop :creation="creation" :index="choose_index" @next="next" @prev="prev" @setLike="setLike" @setMedia="setMedia" ref="pop"></short-pop> -->
    </el-dialog>
</template>

<script>
import shortPop from '@/components/video/short.vue'
import pageTool from '@/mixins/page'
import creationList from './creation-list.vue'
import comment from '@/components/video/comment'
import videoPlayer from './videoPlayer.vue'
import { mapState } from 'vuex'
export default {
    components: {
        shortPop,
        creationList,
        comment,
        videoPlayer
    },
    props: {
        creation: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    mixins: [pageTool],
    data() {
        return {
            visible: false,
            is_full: false,
            total: 0,
            comment_count: 0,
            active: 'comment',
            choose_index: 0,
            init_loading: require('@/assets/gif/re-video-loading.gif'),
            inited: false,
            scrolling: false,
            query: {
                creation_type: 'short',
                user_id: null,
                size: 10,
            },
            // creation: null,
        }
    },
    computed: {
        ...mapState({
            user: state => state.user.user
        })
    },
    mounted() {
        //this.switch()

    },
    watch: {
        visible(value) {
            this.is_full = false
            // !value && this.players.destroy()

            if (!value && this.$refs.pop && this.$refs.pop.players) {
                this.$refs.pop.players.destroy()
                this.$refs.pop.players = null
            }
            this.$refs.pop.share_visible = false

            this.$refs.pop.$refs.complaint.visible = false

            this.$refs.pop.$refs.fee.visible = false
        },
        user(newValue, oldValue) {
            // 在这里可以监听到user的变化
            console.log('退出登录')
            this.$refs.pop.share_visible = false

            this.$refs.pop.$refs.complaint.visible = false

            this.$refs.pop.$refs.fee.visible = false
        }

    },
    model: {
      // 需要双向绑定的 props 变量名称，也就是父组件通过 v-model 与子组件双向绑定的变量
      prop: 'creation',
      // 定义由 $emit 传递变量的名称
      event: 'newValue'
    },
    methods: {
        beforeInit() {
            // console.log('执行到最后了')
            // console.log('this.creation.user_id', this.creation.user_id)
            this.query.user_id = this.creation.user_id
            console.log(' this.query.user_id', this.query.user_id)
            this.query.page = 1
            this.url = '/creation/index'
            this.append = true
            this.data = []
            this.$nextTick(() => {
                this.init()
                    .then(() => { })
                    .catch(() => { })
                    .finally(() => {
                        this.inited = true
                    })
            })
        },

        getMore() {
            // let e = document.getElementById('user-short')
            // if (e.scrollTop + e.clientHeight >= e.scrollHeight - 50) {
            //     if (this.append_loading == true) {
            //         return false
            //     }
            //     this.query.page++
            //     this.init()
            // }

            this.query.page++
            this.init()
        },
        changeVideo(item, index) {
            this.choose_index = index
            //点击作品切换视频
            console.log('点击作品切换视频',item)
            
            this.$refs.pop.creation=item
            this.$refs.pop.init(item)
            this.comment_count = item.comment_count
            // this.creation = item
            this.$emit('newValue',item)
            this.$refs.comment.data = []
            this.$refs.comment.inited = false
            this.$refs.comment.beforeInit(item.creation_id)
        },
        is_fullFun(e) {
            console.log(e)
            this.is_full = e
            if (e) this.active = 'comment'
        },
        creationTotal(value) {
            this.total = value
        },
        switch(item, index) {
            try {
                this.$nextTick(() => {
                    console.log('item-in-there', item)
                    this.comment_count = item.comment_count
                    this.choose_index = index
                    
                    //this.$refs.creationList.beforeInit()
                    this.beforeInit()
                    this.$refs.pop.creation=item
                   
                    this.$refs.pop.init(item, index)
                    
                    // this.$refs.pop.switch()
                    this.$refs.comment.data = []
                    this.$refs.comment.inited = false
                    this.$refs.comment.beforeInit(item.creation_id)
                    
                })
            } catch (err) {
                console.error(err)
            }

        },
        sideVideo(value) {
            // this.$refs.comment.data = []
            // this.$refs.comment.inited = false
            // this.$refs.comment.beforeInit()
            //  this.player.src = value.m3u8_media
            //this.switch(value)init
            this.$refs.pop.creation=value
            this.$refs.pop.init(value)
            // this.$nextTick(() => {
            //     this.player.play()
            // })
        },

        closeFun() {
            this.visible = false
            this.$refs.pop.destruction()
        },
        setLike(data) {
            console.log('data', data)
            // if (data.type != undefined && data.index != undefined) {
            //     this.data[data.index].liked_count = data.type
            //     if (data.type) {
            //         this.data[data.index].like_count++
            //     } else {
            //         this.data[data.index].like_count--
            //     }
            // }
        },
        next() {
            if (this.choose_index == this.data.length) {
                this.$message({
                    message: '暂无更多数据',
                    type: 'warning',
                    customClass: 'super-message',
                })
                return
            }
            let next_creation = this.data[this.choose_index + 1]
            if (next_creation) {
                // this.creation = next_creation
                this.$emit('newValue',next_creation)
                this.$nextTick(() => {
                    
                    this.$refs.pop.creation=next_creation
                    this.$refs.pop.init(next_creation)
                    this.comment_count = next_creation.comment_count
                    // this.creation = item
                    this.$refs.comment.data = []
                    this.$refs.comment.inited = false
                    this.$refs.comment.beforeInit(next_creation.creation_id)
                    this.choose_index++
                })
               
            }
        },
        prev() {
            let prev_creation = this.data[this.choose_index - 1]
            if (prev_creation) {
                // this.creation = prev_creation
                this.$emit('newValue',prev_creation)
                this.$nextTick(() => {
                    // this.comment_count = prev_creation.comment_count
                    // this.$refs.comment.data = []
                    // this.$refs.comment.inited = false
                    // this.$refs.comment.beforeInit(prev_creation.creation_id)
                    // this.$refs.pop.switch(prev_creation)
                    console.log(prev_creation.creation_name,'decrement')
                    this.$refs.pop.creation=prev_creation
                    this.$refs.pop.init(prev_creation)
                    this.comment_count = prev_creation.comment_count
                    // this.creation = item
                    this.$refs.comment.data = []
                    this.$refs.comment.inited = false
                    this.$refs.comment.beforeInit(prev_creation.creation_id)
                    this.choose_index--
                    
                })
            }
        },
        setMedia(value) {
            let param=JSON.parse(JSON.stringify(this.creation))
            param.media_urls = value.value.media_urls
            param.m3u8_media = value.value.m3u8_media
            param.need_pay = 0
            this.$emit('newValue',param)
            this.$nextTick(() => {
                this.$refs.pop.creation=this.creation
                this.$refs.pop.init(param)
            })
        },
    }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__header,
/deep/.el-dialog__body {
    padding: 0 !important;
}

/deep/.el-dialog__body {
    padding-top: calc(4rem + 4px) !important;
}

.el-row,
.el-col {
    height: 100%;
}

.video-window {
    position: relative;

    &-close {
        position: absolute;
        border-radius: 100%;
        background: #060316;
        top: 30px;
        left: 40px;
        z-index: 10001;
    }

    &-close:hover {
        background: rgba(255, 255, 255, 0.6);
    }
}

/deep/.el-dialog {
    background: #0d0920 !important;
    width: 100% !important;
    height: 100% !important;
    margin-left: 0 !important;
}

/deep/.el-tabs__item {
    color: #8b8b8b;
    font-size: calc(0.89286vw + 1.14286px);
}

/deep/.el-tabs__item.is-active {
    color: #ffffff;
}

/deep/.el-tabs__active-bar {
    background: #fff;
    width: 30px !important;
    margin-left: 11px !important;
    height: 1px;
}

/deep/.el-tabs__nav-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #8b8b8b;
    z-index: 1;
}

/deep/.el-tabs__nav {
    margin-left: 30px;
}

.video-data {
    position: absolute;
    bottom: 6%;
    left: 6%;
}

.scroll-window {
    height: calc(100vh - 4rem - 109px);
    padding: 20px 30px;
    overflow-y: scroll;
}

.scroll-window::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}</style>